<template>
  <view class="product-container">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="title-section">
        <text class="page-title">商品管理</text>
        <text class="date">{{ currentDate }}</text>
      </view>
      <view class="refresh-btn" @click="refreshData">
        <uni-icons type="refresh" size="18" color="#FF8C42"></uni-icons>
      </view>
    </view>
    
    <!-- 商品统计概览 -->
    <view class="stats-overview">
      <view class="stats-grid">
        <!-- 商品总数 -->
        <view class="stat-card">
          <view class="stat-icon product-icon">
            <uni-icons type="gift" size="24" color="#FF8C42"></uni-icons>
          </view>
          <view class="stat-content">
            <text class="stat-label">商品总数</text>
            <text class="stat-value">{{ productStats.totalProducts }}</text>
          </view>
        </view>
        
        <!-- 在售商品 -->
        <view class="stat-card">
          <view class="stat-icon sales-icon">
            <uni-icons type="cart" size="24" color="#FF8C42"></uni-icons>
          </view>
          <view class="stat-content">
            <text class="stat-label">在售商品</text>
            <text class="stat-value">{{ productStats.activeProducts }}</text>
          </view>
        </view>
        
        <!-- 库存预警 -->
        <view class="stat-card">
          <view class="stat-icon warning-icon">
            <uni-icons type="notification" size="24" color="#FF8C42"></uni-icons>
          </view>
          <view class="stat-content">
            <text class="stat-label">库存预警</text>
            <text class="stat-value">{{ productStats.lowStockCount }}</text>
          </view>
        </view>
        
        <!-- 已下架 -->
        <view class="stat-card">
          <view class="stat-icon inactive-icon">
            <uni-icons type="eye-slash" size="24" color="#FF8C42"></uni-icons>
          </view>
          <view class="stat-content">
            <text class="stat-label">已下架</text>
            <text class="stat-value">{{ productStats.inactiveProducts }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮区域 -->
    <view class="action-bar">
      <view class="search-box">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索商品名称" 
          confirm-type="search"
          @confirm="searchProducts"
          @input="onSearchInput"
        />
        <view v-if="searchKeyword" class="clear-search" @click="clearSearch">
          <uni-icons type="close" size="14" color="#999"></uni-icons>
        </view>
      </view>
      <view class="filter-btn" @click="showFilterOptions">
        <uni-icons type="filter" size="20" color="#666"></uni-icons>
        <text class="filter-text">筛选</text>
      </view>
      <view class="add-btn" @click="showAddProductForm">
        <uni-icons type="plus" size="20" color="#FFFFFF"></uni-icons>
        <text>上架商品</text>
      </view>
    </view>
    
    <!-- 分类标签 -->
    <view class="category-tabs">
      <scroll-view scroll-x="true" class="category-scroll" show-scrollbar="false">
        <view class="category-list">
          <view 
            v-for="(category, index) in categories" 
            :key="index"
            :class="['category-item', selectedCategory === category.id ? 'category-active' : '']"
            @click="selectCategory(category.id)"
          >
            {{ category.name }}
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 商品列表 -->
    <view class="product-list">
      <view 
        v-for="product in displayProducts" 
        :key="product.id" 
        class="product-card"
        :class="{'inactive-product': product.status !== 1}"
      >
        <view class="product-image-container">
          <image class="product-image" :src="getProductImage(product)" mode="aspectFill"></image>
          <view v-if="product.status !== 1" class="inactive-badge">已下架</view>
          <view v-else-if="product.totalStock <= product.safeStock" class="low-stock-badge">库存紧张</view>
        </view>
        <view class="product-info">
          <view class="product-name">{{ product.name }}</view>
          <view class="product-meta">
            <view class="product-price">¥{{ product.price.toFixed(2) }}</view>
            <view class="product-stock">库存: {{ product.totalStock }}</view>
          </view>
          <view class="product-category-tag">{{ getCategoryName(product.categoryId) }}</view>
          <view class="product-sales">安全库存: {{ product.safeStock }}</view>
        </view>
        <view class="product-actions">
          <view class="action-btn view-btn" @click="viewProductDetail(product.id)">
            <uni-icons type="eye" size="16" color="#FF8C42"></uni-icons>
            <text>查看</text>
          </view>
          <view 
            class="action-btn status-btn" 
            :class="product.status === 1 ? 'remove-btn' : 'restock-btn'"
            @click="toggleProductStatus(product.id)"
          >
            <uni-icons :type="product.status === 1 ? 'eye-slash' : 'eye'" size="16" :color="product.status === 1 ? '#666' : '#FF8C42'"></uni-icons>
            <text>{{ product.status === 1 ? '下架' : '上架' }}</text>
          </view>
          <view class="action-btn stock-btn" @click="showAddStockForm(product.id)">
            <uni-icons type="plus" size="16" color="#10B981"></uni-icons>
            <text>库存</text>
          </view>
          <view class="action-btn edit-btn" @click="editProduct(product.id)">
            <uni-icons type="edit" size="16" color="#666"></uni-icons>
            <text>编辑</text>
          </view>
        </view>
        <view class="delete-btn" @click="deleteProduct(product.id)">
          <uni-icons type="trash" size="16" color="#fff"></uni-icons>
        </view>
      </view>
      
      <!-- 加载中状态 -->
      <view v-if="isLoading" class="loading-state">
        <uni-icons type="spinner-cycle" size="30" color="#FF8C42"></uni-icons>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 空状态 -->
      <view v-if="!isLoading && displayProducts.length === 0" class="empty-state">
        <image class="empty-image" src="/static/empty-box.png"></image>
        <text class="empty-text">{{ searchKeyword ? '未找到相关商品' : '暂无商品数据' }}</text>
        <view class="empty-action" @click="showAddProductForm">添加商品</view>
      </view>
    </view>
    
    <!-- 分页控制 -->
    <view v-if="displayProducts.length > 0" class="pagination">
      <view 
        class="pagination-btn prev-btn" 
        :class="{ 'disabled': currentPage === 1 }"
        @click="prevPage"
      >
        <uni-icons type="left" size="14" :color="currentPage === 1 ? '#ccc' : '#666'"></uni-icons>
        <text>上一页</text>
      </view>
      <view class="pagination-info">{{ currentPage }} / {{ totalPages }}</view>
      <view 
        class="pagination-btn next-btn" 
        :class="{ 'disabled': currentPage === totalPages }"
        @click="nextPage"
      >
        <text>下一页</text>
        <uni-icons type="right" size="14" :color="currentPage === totalPages ? '#ccc' : '#666'"></uni-icons>
      </view>
    </view>
    
    <!-- 创建/编辑商品弹窗 -->
    <uni-popup ref="productFormPopup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ isEditing ? '编辑商品' : '创建新商品' }}</text>
          <view class="popup-close" @click="closeProductFormPopup">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="popup-body">
          <view class="form-item">
            <text class="form-label">商品名称</text>
            <input 
              class="form-input" 
              v-model="productForm.name" 
              placeholder="请输入商品名称"
            />
          </view>
          <view class="form-item">
            <text class="form-label">商品价格</text>
            <input 
              class="form-input" 
              v-model="productForm.price" 
              placeholder="请输入商品价格"
              type="digit"
            />
          </view>
          <view class="form-item">
            <text class="form-label">商品库存</text>
            <input 
              class="form-input" 
              v-model="productForm.totalStock" 
              placeholder="请输入商品库存"
              type="number"
            />
          </view>
          <view class="form-item">
            <text class="form-label">安全库存</text>
            <input 
              class="form-input" 
              v-model="productForm.safeStock" 
              placeholder="请输入安全库存"
              type="number"
            />
          </view>
          <view class="form-item">
            <text class="form-label">商品分类</text>
            <picker 
              class="form-picker" 
              :range="categoryOptions" 
              range-key="name"
              @change="onCategoryChange"
            >
              <view class="picker-value">
                {{ getCategoryName(productForm.categoryId) || '请选择商品分类' }}
              </view>
            </picker>
          </view>
          <view class="form-item">
            <text class="form-label">商品图片</text>
            <view class="image-upload" @click="chooseImage">
              <image 
                v-if="productForm.mainImageUrl" 
                :src="productForm.mainImageUrl" 
                class="preview-image" 
                mode="aspectFill"
              ></image>
              <view v-else class="upload-placeholder">
                <uni-icons type="camera" size="24" color="#999"></uni-icons>
                <text>点击上传图片</text>
              </view>
            </view>
          </view>
          <view class="form-item">
            <text class="form-label">商品描述</text>
            <textarea 
              class="form-textarea" 
              v-model="productForm.description" 
              placeholder="请输入商品描述"
            ></textarea>
          </view>
          <view class="form-item" v-if="isEditing">
            <text class="form-label">商品状态</text>
            <view class="status-switch">
              <text>下架</text>
              <switch 
                :checked="productForm.status === 1" 
                @change="onStatusChange" 
                color="#FF8C42"
              />
              <text>上架</text>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <view class="cancel-btn" @click="closeProductFormPopup">取消</view>
          <view class="submit-btn" @click="submitProductForm">{{ isEditing ? '保存' : '创建' }}</view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 商品详情弹窗 -->
    <uni-popup ref="productDetailPopup" type="center">
      <view class="detail-popup-content">
        <view class="popup-header">
          <text class="popup-title">商品详情</text>
          <view class="popup-close" @click="closeProductDetailPopup">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="detail-popup-body">
          <view v-if="currentProduct" class="product-detail">
            <image 
              class="detail-image" 
              :src="getProductImage(currentProduct)" 
              mode="aspectFill"
            ></image>
            <view class="detail-info">
              <view class="detail-name">{{ currentProduct.name }}</view>
              <view class="detail-price">¥{{ currentProduct.price.toFixed(2) }}</view>
              <view class="detail-item">
                <text class="detail-label">商品分类:</text>
                <text class="detail-value">{{ getCategoryName(currentProduct.categoryId) }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">库存数量:</text>
                <text class="detail-value">{{ currentProduct.totalStock }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">安全库存:</text>
                <text class="detail-value">{{ currentProduct.safeStock }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">商品状态:</text>
                <text class="detail-value" :class="currentProduct.status === 1 ? 'active-status' : 'inactive-status'">
                  {{ currentProduct.status === 1 ? '在售' : '已下架' }}
                </text>
              </view>
              <view class="detail-item">
                <text class="detail-label">商品描述:</text>
                <text class="detail-desc">{{ currentProduct.description || '暂无描述' }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">创建时间:</text>
                <text class="detail-value">{{ formatDate(currentProduct.createTime) }}</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">更新时间:</text>
                <text class="detail-value">{{ formatDate(currentProduct.updateTime) }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="detail-popup-footer">
          <view class="detail-btn edit-detail-btn" @click="editCurrentProduct">
            <uni-icons type="edit" size="16" color="#FFFFFF"></uni-icons>
            <text>编辑商品</text>
          </view>
          <view 
            class="detail-btn" 
            :class="currentProduct && currentProduct.status === 1 ? 'remove-detail-btn' : 'restock-detail-btn'"
            @click="toggleCurrentProductStatus"
          >
            <uni-icons 
              :type="currentProduct && currentProduct.status === 1 ? 'eye-slash' : 'eye'" 
              size="16" 
              color="#FFFFFF"
            ></uni-icons>
            <text>{{ currentProduct && currentProduct.status === 1 ? '下架商品' : '上架商品' }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 增加库存弹窗 -->
    <uni-popup ref="addStockPopup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">增加商品库存</text>
          <view class="popup-close" @click="closeAddStockPopup">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        <view class="popup-body">
          <view v-if="currentProduct" class="stock-info">
            <view class="stock-product-name">{{ currentProduct.name }}</view>
            <view class="stock-current">当前库存: {{ currentProduct.totalStock }}</view>
            <view class="stock-preview">增加后库存: {{ currentProduct.totalStock + (parseInt(addStockAmount) || 0) }}</view>
          </view>
          <view class="form-item">
            <text class="form-label">增加数量</text>
            <input 
              class="form-input" 
              v-model="addStockAmount" 
              placeholder="请输入要增加的库存数量"
              type="number"
              @input="onStockAmountInput"
            />
            <text class="form-hint">请输入大于0的整数</text>
          </view>
          <view class="form-item">
            <text class="form-label">备注（可选）</text>
            <textarea 
              class="form-textarea" 
              v-model="stockRemarks" 
              placeholder="请输入库存增加的备注信息"
            ></textarea>
          </view>
        </view>
        <view class="popup-footer">
          <view class="cancel-btn" @click="closeAddStockPopup">取消</view>
          <view 
            class="submit-btn" 
            :class="{'disabled': !canSubmitStock}"
            @click="submitAddStock"
          >
            确认增加
          </view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 底部导航栏 -->
    <tab-bar :active="1"></tab-bar>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue';
import { useUserStore } from '@/store/user';
import TabBar from '@/components/tab-bar.vue';
import http from '@/utils/http/http.js';
import { BASE_URL } from '@/config/env';
// import uni from 'uni-app'; // Declare the uni variable

// 状态栏高度
const statusBarHeight = ref(0);
const userStore = useUserStore();
const searchKeyword = ref('');
const selectedCategory = ref('all');
const allProducts = ref([]);
const productFormPopup = ref(null);
const productDetailPopup = ref(null);
const isEditing = ref(false);
const currentProduct = ref(null);
const isLoading = ref(false);
const addStockPopup = ref(null);
const addStockAmount = ref('');
const stockRemarks = ref(''); // 新增备注字段

// 分页相关
const currentPage = ref(1);
const pageSize = ref(8);
const totalPages = computed(() => Math.ceil(filteredProducts.value.length / pageSize.value));

// 商品表单数据
const productForm = reactive({
  id: null,
  name: '',
  price: '',
  totalStock: '',
  safeStock: '',
  categoryId: '',
  mainImageUrl: '',
  description: '',
  status: 1,
  merchantId: 1
});

// 计算属性：是否可以提交库存增加
const canSubmitStock = computed(() => {
  const amount = parseInt(addStockAmount.value);
  return amount && amount > 0 && currentProduct.value;
});

// 获取状态栏高度
const getStatusBarHeight = () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    statusBarHeight.value = systemInfo.statusBarHeight || 0;
  } catch (e) {
    console.error('获取系统信息失败:', e);
    statusBarHeight.value = 0;
  }
};

// 获取当前日期
const currentDate = computed(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  return `${year}年${month}月${day}日`;
});

// 商品统计数据
const productStats = reactive({
  totalProducts: 0,
  activeProducts: 0,
  lowStockCount: 0,
  inactiveProducts: 0
});

// 商品分类
const categories = [
  { id: 'all', name: '全部' },
  { id: 1, name: '生活用品' },
  { id: 2, name: '零食' },
  { id: 3, name: '饮料' },
  { id: 4, name: '食品' },
  { id: 6, name: '个人护理' },
  { id: 7, name: '清洁用品' },
  { id: 8, name: '口腔护理' },
  { id: 10, name: '电子配件' },
  { id: 11, name: '电脑配件' }
];

// 用于选择器的分类选项（排除"全部"选项）
const categoryOptions = computed(() => {
  return categories.filter(c => c.id !== 'all');
});

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知';
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 获取商品图片
const getProductImage = (product) => {
  if (product.mainImageUrl) {
    // 如果是相对路径，添加基础URL
    if (product.mainImageUrl.startsWith('/')) {
      // const BASE_URL = 'http://localhost:8080';
	  //const BASE_URL = 'http://192.168.137.1:8080';
      return `${BASE_URL}${product.mainImageUrl}`;
    }
    return product.mainImageUrl;
  }
  return `/placeholder.svg?height=120&width=120&text=${encodeURIComponent(product.name)}`;
};

// 从API获取商品数据
const fetchProducts = async () => {
  isLoading.value = true;
  try {
    // 确保用户已登录且是商家
    if (!userStore.isLoggedIn || !userStore.isMerchant()) {
      console.error('用户未登录或不是商家');
      isLoading.value = false;
      return;
    }
    
    // 使用商家专用API获取商品
    const response = await http.get(BASE_URL +'/api/merchant/products', {
      header: {
        'Authorization': `Bearer ${userStore.token || ''}`
      }
    });
    
    if (response.code === 200 && response.data) {
      // 处理返回的数据
      if (Array.isArray(response.data)) {
        allProducts.value = response.data;
      } else if (typeof response.data === 'object' && response.data !== null) {
        allProducts.value = response.data.products || response.data.list || [];
      } else {
        allProducts.value = [];
        uni.showToast({
          title: '获取商品数据格式错误',
          icon: 'none'
        });
      }
      updateProductStats();
    } else {
      uni.showToast({
        title: '获取商品数据失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('获取商品数据出错:', error);
    uni.showToast({
      title: '网络错误，请稍后重试',
      icon: 'none'
    });
  } finally {
    isLoading.value = false;
  }
};

// 过滤后的商品列表
const filteredProducts = computed(() => {
  let result = [...allProducts.value];
  
  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    result = result.filter(p => p.categoryId === selectedCategory.value);
  }
  
  // 按关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    result = result.filter(p => 
      p.name.toLowerCase().includes(keyword) || 
      (p.description && p.description.toLowerCase().includes(keyword))
    );
  }
  
  return result;
});

// 当前页显示的商品
const displayProducts = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredProducts.value.slice(start, end);
});

// 获取分类名称
const getCategoryName = (categoryId) => {
  if (!categoryId) return '未分类';
  const category = categories.find(c => c.id === categoryId);
  return category ? category.name : '未分类';
};

// 分类选择变更
const onCategoryChange = (e) => {
  const index = e.detail.value;
  productForm.categoryId = categoryOptions.value[index].id;
};

// 商品状态变更
const onStatusChange = (e) => {
  productForm.status = e.detail.value ? 1 : 0;
};

// 库存数量输入事件
const onStockAmountInput = () => {
  // 确保输入的是正整数
  const value = addStockAmount.value;
  if (value && (isNaN(value) || parseInt(value) <= 0)) {
    addStockAmount.value = '';
  }
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 这里应该上传图片到服务器，获取URL
      // 为了演示，我们直接使用本地临时路径
      productForm.mainImageUrl = res.tempFilePaths[0];
    }
  });
};

// 更新商品统计数据
const updateProductStats = () => {
  productStats.totalProducts = allProducts.value.length;
  productStats.activeProducts = allProducts.value.filter(p => p.status === 1).length;
  productStats.inactiveProducts = allProducts.value.filter(p => p.status !== 1).length;
  productStats.lowStockCount = allProducts.value.filter(p => p.status === 1 && p.totalStock <= p.safeStock).length;
};

// 刷新数据
const refreshData = async () => {
  uni.showLoading({ title: '刷新中...' });
  
  try {
    await fetchProducts();
    uni.showToast({
      title: '数据已刷新',
      icon: 'success'
    });
  } catch (error) {
    uni.showToast({
      title: '刷新失败',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId;
  currentPage.value = 1; // 重置到第一页
};

// 搜索输入事件
const onSearchInput = () => {
  if (searchKeyword.value === '') {
    // 如果搜索框被清空，重置搜索
    currentPage.value = 1;
  }
};

// 清除搜索
const clearSearch = () => {
  searchKeyword.value = '';
  currentPage.value = 1;
};

// 搜索商品
const searchProducts = () => {
  currentPage.value = 1; // 重置到第一页
};

// 显示筛选选项
const showFilterOptions = () => {
  uni.showActionSheet({
    itemList: ['价格从高到低', '价格从低到高', '库存从高到低', '库存从低到高', '安全库存从高到低'],
    success: (res) => {
      const index = res.tapIndex;
      let sortedProducts = [...allProducts.value];
      
      // 根据选择的筛选条件排序商品
      if (index === 0) {
        sortedProducts.sort((a, b) => b.price - a.price);
      } else if (index === 1) {
        sortedProducts.sort((a, b) => a.price - b.price);
      } else if (index === 2) {
        sortedProducts.sort((a, b) => b.totalStock - a.totalStock);
      } else if (index === 3) {
        sortedProducts.sort((a, b) => a.totalStock - b.totalStock);
      } else if (index === 4) {
        sortedProducts.sort((a, b) => b.safeStock - a.safeStock);
      }
      
      allProducts.value = sortedProducts;
    }
  });
};

// 查看商品详情
const viewProductDetail = (productId) => {
  const product = allProducts.value.find(p => p.id === productId);
  if (!product) {
    return uni.showToast({
      title: '商品不存在',
      icon: 'none'
    });
  }
  
  // 设置当前商品
  currentProduct.value = { ...product };
  
  // 打开详情弹窗
  productDetailPopup.value.open();
};

// 关闭商品详情弹窗
const closeProductDetailPopup = () => {
  productDetailPopup.value.close();
  currentProduct.value = null;
};

// 编辑当前查看的商品
const editCurrentProduct = () => {
  if (!currentProduct.value) return;
  
  // 关闭详情弹窗
  closeProductDetailPopup();
  
  // 编辑该商品
  editProduct(currentProduct.value.id);
};

// 切换当前查看商品的状态
const toggleCurrentProductStatus = () => {
  if (!currentProduct.value) return;
  
  // 关闭详情弹窗
  closeProductDetailPopup();
  
  // 切换该商品状态
  toggleProductStatus(currentProduct.value.id);
};

// 切换商品上下架状态
const toggleProductStatus = (productId) => {
  const productIndex = allProducts.value.findIndex(p => p.id === productId);
  if (productIndex === -1) return;
  
  const product = allProducts.value[productIndex];
  const newStatus = product.status === 1 ? 0 : 1;
  
  uni.showModal({
    title: '确认操作',
    content: `确定要${newStatus === 1 ? '上架' : '下架'}商品"${product.name}"吗？`,
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '处理中...' });
        
        try {
          // 调用API更新商品状态
          const response = await http.put(`/api/products/${productId}/status?status=${newStatus}`, {}, {
            header: {
              'Authorization': `Bearer ${userStore.token || ''}`
            }
          });
          
          if (response.code === 200) {
            // 更新本地商品状态
            allProducts.value[productIndex].status = newStatus;
            
            // 更新统计数据
            updateProductStats();
            
            uni.showToast({
              title: `商品已${newStatus === 1 ? '上架' : '下架'}`,
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: response.message || '操作失败',
              icon: 'none'
            });
          }
        } catch (error) {
          console.error('更新商品状态失败:', error);
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          });
        } finally {
          uni.hideLoading();
        }
      }
    }
  });
};

// 删除商品
const deleteProduct = (productId) => {
  const product = allProducts.value.find(p => p.id === productId);
  if (!product) return;
  
  uni.showModal({
    title: '确认删除',
    content: `确定要删除商品"${product.name}"吗？此操作不可恢复！`,
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '删除中...' });
        
        try {
          // 调用API删除商品
          const response = await http.delete(BASE_URL +`/api/products/${productId}`, {
            header: {
              'Authorization': `Bearer ${userStore.token || ''}`
            }
          });
          
          if (response.code === 200) {
            // 从数组中删除商品
            allProducts.value = allProducts.value.filter(p => p.id !== productId);
            
            // 更新统计数据
            updateProductStats();
            
            // 如果当前页没有商品了，且不是第一页，则回到上一页
            if (displayProducts.value.length === 0 && currentPage.value > 1) {
              currentPage.value--;
            }
            
            uni.showToast({
              title: '商品已删除',
              icon: 'success'
            });
          } else {
            uni.showToast({
              title: response.message || '删除失败',
              icon: 'none'
            });
          }
        } catch (error) {
          console.error('删除商品失败:', error);
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          });
        } finally {
          uni.hideLoading();
        }
      }
    }
  });
};

// 编辑商品
const editProduct = (productId) => {
  const product = allProducts.value.find(p => p.id === productId);
  if (!product) return;
  
  // 设置为编辑模式
  isEditing.value = true;
  
  // 填充表单数据
  Object.assign(productForm, {
    id: product.id,
    name: product.name,
    price: product.price,
    totalStock: product.totalStock,
    safeStock: product.safeStock,
    categoryId: product.categoryId,
    mainImageUrl: product.mainImageUrl,
    description: product.description || '',
    status: product.status,
    merchantId: product.merchantId
  });
  
  // 打开弹窗
  productFormPopup.value.open();
};

// 显示添加商品表单
const showAddProductForm = () => {
  // 设置为添加模式
  isEditing.value = false;
  
  // 重置表单数据
  Object.assign(productForm, {
    id: null,
    name: '',
    price: '',
    totalStock: '',
    safeStock: '',
    categoryId: '',
    mainImageUrl: '',
    description: '',
    status: 1,
    merchantId: 1 // 默认商家ID
  });
  
  // 打开弹窗
  productFormPopup.value.open();
};

// 关闭商品表单弹窗
const closeProductFormPopup = () => {
  productFormPopup.value.close();
};

// 提交商品表单（创建或更新）
const submitProductForm = async () => {
  // 表单验证
  if (!productForm.name) {
    return uni.showToast({ title: '请输入商品名称', icon: 'none' });
  }
  if (!productForm.price) {
    return uni.showToast({ title: '请输入商品价格', icon: 'none' });
  }
  if (!productForm.totalStock) {
    return uni.showToast({ title: '请输入商品库存', icon: 'none' });
  }
  if (!productForm.safeStock) {
    return uni.showToast({ title: '请输入安全库存', icon: 'none' });
  }
  if (!productForm.categoryId) {
    return uni.showToast({ title: '请选择商品分类', icon: 'none' });
  }
  
  uni.showLoading({ title: isEditing.value ? '保存中...' : '创建中...' });
  
  try {
    // 准备商品数据
    const productData = {
      name: productForm.name,
      price: parseFloat(productForm.price),
      totalStock: parseInt(productForm.totalStock),
      safeStock: parseInt(productForm.safeStock),
      categoryId: productForm.categoryId,
      mainImageUrl: productForm.mainImageUrl,
      description: productForm.description,
      status: productForm.status,
      merchantId: productForm.merchantId
    };
    
    if (isEditing.value) {
      // 更新商品
      const response = await http.put(BASE_URL +`/api/products/${productForm.id}`, productData, {
        header: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${userStore.token || ''}`
        }
      });
      
      if (response.code === 200) {
        // 更新本地数据
        const index = allProducts.value.findIndex(p => p.id === productForm.id);
        if (index !== -1) {
          allProducts.value[index] = {
            ...allProducts.value[index],
            ...productData,
            updateTime: new Date().toISOString()
          };
        }
        
        uni.showToast({
          title: '商品已更新',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: response.message || '更新失败',
          icon: 'none'
        });
      }
    } else {
      // 创建新商品
      const response = await http.post(BASE_URL +'/api/products', productData, {
        header: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${userStore.token || ''}`
        }
      });
      
      if (response.code === 200) {
        // 添加新创建的商品到列表
        const newProduct = response.data;
        allProducts.value.unshift(newProduct);
        
        uni.showToast({
          title: '商品已创建',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: response.message || '创建失败',
          icon: 'none'
        });
      }
    }
    
    // 更新统计数据
    updateProductStats();
    
    // 关闭弹窗
    closeProductFormPopup();
  } catch (error) {
    console.error('操作商品失败:', error);
    uni.showToast({
      title: '网络错误，请稍后重试',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 显示增加库存表单
const showAddStockForm = (productId) => {
  const product = allProducts.value.find(p => p.id === productId);
  if (!product) return;
  
  // 设置当前商品
  currentProduct.value = { ...product };
  addStockAmount.value = '';
  stockRemarks.value = '';
  
  // 打开弹窗
  addStockPopup.value.open();
};

// 关闭增加库存弹窗
const closeAddStockPopup = () => {
  addStockPopup.value.close();
  currentProduct.value = null;
  addStockAmount.value = '';
  stockRemarks.value = '';
};

// 提交增加库存 - 修改后的实现，使用指定的API接口
const submitAddStock = async () => {
  if (!currentProduct.value) return;
  
  // 验证输入
  if (!addStockAmount.value || parseInt(addStockAmount.value) <= 0) {
    return uni.showToast({
      title: '请输入有效的库存增加数量',
      icon: 'none'
    });
  }
  
  const amount = parseInt(addStockAmount.value);
  const newTotalStock = currentProduct.value.totalStock + amount;
  
  uni.showLoading({ title: '增加库存中...' });
  
  try {
    // 准备更新数据 - 使用完整的商品信息
    const updateData = {
      name: currentProduct.value.name,
      price: currentProduct.value.price,
      totalStock: newTotalStock, // 更新后的总库存
      safeStock: currentProduct.value.safeStock,
      categoryId: currentProduct.value.categoryId,
      mainImageUrl: currentProduct.value.mainImageUrl,
      description: currentProduct.value.description,
      status: currentProduct.value.status,
      merchantId: currentProduct.value.merchantId
    };
    
    console.log('增加库存请求数据:', {
      productId: currentProduct.value.id,
      originalStock: currentProduct.value.totalStock,
      addAmount: amount,
      newTotalStock: newTotalStock,
      remarks: stockRemarks.value
    });
    
    // 调用指定的API接口更新商品
    const response = await http.put(BASE_URL +`/api/products/${currentProduct.value.id}`, updateData, {
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${userStore.token || ''}`
      }
    });
    
    console.log('增加库存响应:', response);
    
    if (response.code === 200) {
      // 更新本地数据
      const index = allProducts.value.findIndex(p => p.id === currentProduct.value.id);
      if (index !== -1) {
        allProducts.value[index].totalStock = newTotalStock;
        allProducts.value[index].updateTime = new Date().toISOString();
      }
      
      // 更新统计数据
      updateProductStats();
      
      // 关闭弹窗
      closeAddStockPopup();
      
      uni.showToast({
        title: `成功增加${amount}件库存`,
        icon: 'success'
      });
      
      // 如果有备注，可以在控制台输出或发送到日志系统
      if (stockRemarks.value) {
        console.log(`库存增加备注: ${stockRemarks.value}`);
      }
      
    } else {
      uni.showToast({
        title: response.message || response.msg || '增加库存失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('增加库存失败:', error);
    uni.showToast({
      title: '网络错误，请稍后重试',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 分页控制 - 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

// 分页控制 - 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

// 监听分类和搜索变化，重置页码
watch([selectedCategory, searchKeyword], () => {
  currentPage.value = 1;
});

// 页面加载时执行
onMounted(() => {
  console.log('商品管理页面加载完成');
  // 获取状态栏高度
  getStatusBarHeight();
  
  // 初始化用户状态
  userStore.initUserState();
  
  // 如果用户不是商家，提示切换身份
  if (0) {
    uni.showModal({
      title: '提示',
      content: '您当前不是商家身份，是否切换为商家身份？',
      success: (res) => {
        if (res.confirm) {
          // 模拟商家登录
          const merchantInfo = {
            id: 'M' + Math.floor(Math.random() * 10000),
            username: '示例商家',
            storeName: '智能货架管理中心',
            phone: '13800138000'
          };
          userStore.login('merchant', merchantInfo);
          
          // 获取商品数据
          fetchProducts();
        } else {
          // 用户取消，返回用户首页
          uni.redirectTo({
            url: '/pages/index/index'
          });
        }
      }
    });
  } else {
    // 获取商品数据
    fetchProducts();
  }
});
</script>

<style>
.product-container {
  padding-bottom: 120rpx; /* 增加底部padding，为底部导航栏留出空间 */
  background-color: #FFF9F2; /* 与首页一致的背景色 */
  min-height: 100vh;
}

.page-header {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border-bottom: 1rpx solid #FFE6CC; /* 与首页一致的边框 */
}

.title-section {
  display: flex;
  flex-direction: column;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.date {
  font-size: 24rpx;
  color: #999999;
  margin-top: 6rpx;
}

.refresh-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF0E0; /* 与首页一致的按钮背景色 */
  border-radius: 30rpx;
}

.stats-overview {
  padding: 20rpx 30rpx;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.stat-card {
  width: calc(50% - 20rpx);
  margin: 10rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #FFE6CC; /* 与首页一致的边框 */
}

.stat-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}

.product-icon, .sales-icon, .warning-icon, .inactive-icon {
  background-color: #FFF0E0; /* 与首页一致的图标背景色 */
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 24rpx;
  color: #666666;
  display: block;
  margin-bottom: 10rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  display: block;
}

/* 操作按钮区域 */
.action-bar {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
}

.search-box {
  flex: 1;
  height: 70rpx;
  background-color: #FFFFFF;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  border: 1rpx solid #FFE6CC;
  position: relative;
}

.search-box uni-icons {
  margin-right: 10rpx;
}

.search-box input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
  padding-right: 40rpx;
}

.clear-search {
  position: absolute;
  right: 20rpx;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
}

.filter-btn {
  height: 70rpx;
  background-color: #FFFFFF;
  border-radius: 35rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
  margin-left: 20rpx;
  border: 1rpx solid #FFE6CC;
}

.filter-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 6rpx;
}

.add-btn {
  height: 70rpx;
  background-color: #FF8C42;
  border-radius: 35rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30rpx;
  margin-left: 20rpx;
  color: #FFFFFF;
  font-size: 28rpx;
}

.add-btn uni-icons {
  margin-right: 10rpx;
}

/* 分类标签 */
.category-tabs {
  padding: 10rpx 0;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #FFE6CC;
}

.category-scroll {
  width: 100%;
  white-space: nowrap;
}

.category-list {
  padding: 0 20rpx;
  display: inline-flex;
}

.category-item {
  padding: 10rpx 30rpx;
  margin: 0 10rpx;
  font-size: 28rpx;
  color: #666666;
  background-color: #F5F5F5;
  border-radius: 30rpx;
  display: inline-block;
}

.category-active {
  background-color: #FFF0E0;
  color: #FF8C42;
  font-weight: bold;
}

/* 商品卡片布局优化 */
.product-list {
  padding: 20rpx 10rpx; /* 减少左右padding */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 确保两列均匀分布 */
}

.product-card {
  width: calc(50% - 15rpx); /* 更精确的宽度计算 */
  margin-bottom: 20rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #FFE6CC;
  transition: all 0.3s ease;
  position: relative;
}

/* 删除按钮 */
.delete-btn {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(239, 68, 68, 0.8);
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* 已下架商品特殊样式 */
.inactive-product {
  opacity: 0.8;
  background-color: #f9f9f9;
}

.inactive-product .product-name,
.inactive-product .product-price,
.inactive-product .product-stock,
.inactive-product .product-sales {
  color: #999 !important;
}

/* 商品图片容器优化 */
.product-image-container {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 保持正方形比例 */
  position: relative;
  background-color: #FFF0E0;
}

.product-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inactive-badge, .low-stock-badge {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
}

.inactive-badge {
  background-color: #F3F4F6;
  color: #6B7280;
}

.low-stock-badge {
  background-color: #FEF3C7;
  color: #F59E0B;
}

.product-info {
  padding: 20rpx;
}

.product-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  height: 80rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.product-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #FF8C42;
}

.product-stock {
  font-size: 24rpx;
  color: #666666;
}

.product-category-tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  background-color: #FFF0E0;
  color: #FF8C42;
  font-size: 22rpx;
  border-radius: 20rpx;
  margin-bottom: 10rpx;
}

.product-sales {
  font-size: 24rpx;
  color: #999999;
}

.product-actions {
  display: flex;
  border-top: 1rpx solid #FFE6CC;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #666666;
  border-right: 1rpx solid #FFE6CC;
}

.action-btn:last-child {
  border-right: none;
}

.action-btn uni-icons {
  margin-right: 6rpx;
}

.view-btn {
  color: #FF8C42;
}

.status-btn {
  color: #666666;
}

.remove-btn {
  color: #666666;
}

.restock-btn {
  color: #FF8C42;
}

.stock-btn {
  color: #10B981;
}

.edit-btn {
  color: #666666;
}

/* 加载中状态 */
.loading-state {
  width: 100%;
  padding: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-text {
  font-size: 28rpx;
  color: #999999;
  margin-top: 20rpx;
}

/* 空状态 */
.empty-state {
  width: 100%;
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 30rpx;
}

.empty-action {
  padding: 16rpx 40rpx;
  background-color: #FF8C42;
  color: #FFFFFF;
  font-size: 28rpx;
  border-radius: 40rpx;
}

/* 分页控制 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  background-color: #FFFFFF;
  border-top: 1rpx solid #FFE6CC;
}

.pagination-btn {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  border: 1rpx solid #DDDDDD;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666666;
  margin: 0 20rpx;
}

.pagination-btn.disabled {
  opacity: 0.5;
  color: #CCCCCC;
}

.prev-btn uni-icons {
  margin-right: 6rpx;
}

.next-btn uni-icons {
  margin-left: 6rpx;
}

.pagination-info {
  font-size: 24rpx;
  color: #666666;
}

/* 创建/编辑商品弹窗 */
.popup-content {
  width: 650rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #FFE6CC;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.popup-close {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-body {
  padding: 30rpx;
  max-height: 800rpx;
  overflow-y: auto;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-top: 1rpx solid #FFE6CC;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #DDDDDD;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #DDDDDD;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.picker-value {
  color: #333333;
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #DDDDDD;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-hint {
  font-size: 22rpx;
  color: #999999;
  margin-top: 8rpx;
  display: block;
}

.status-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 200rpx;
}

.image-upload {
  width: 100%;
  height: 200rpx;
  border: 2rpx dashed #DDDDDD;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999999;
}

.upload-placeholder text {
  margin-top: 10rpx;
  font-size: 24rpx;
}

/* 商品详情弹窗 */
.detail-popup-content {
  width: 700rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
}

.detail-popup-body {
  padding: 30rpx;
  max-height: 600rpx;
  overflow-y: auto;
}

.product-detail {
  display: flex;
  flex-direction: column;
}

.detail-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
  object-fit: cover;
  margin-bottom: 20rpx;
}

.detail-info {
  flex: 1;
}

.detail-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.detail-price {
  font-size: 36rpx;
  font-weight: bold;
  color: #FF8C42;
  margin-bottom: 20rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 15rpx;
  align-items: flex-start;
}

.detail-label {
  font-size: 26rpx;
  color: #666666;
  min-width: 120rpx;
  margin-right: 10rpx;
}

.detail-value {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
}

.detail-desc {
  font-size: 26rpx;
  color: #333333;
  line-height: 1.5;
  flex: 1;
}

.active-status {
  color: #10B981;
}

.inactive-status {
  color: #EF4444;
}

.detail-popup-footer {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  border-top: 1rpx solid #FFE6CC;
  gap: 20rpx;
}

.detail-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.edit-detail-btn {
  background-color: #FF8C42;
  color: #FFFFFF;
}

.remove-detail-btn {
  background-color: #6B7280;
  color: #FFFFFF;
}

.restock-detail-btn {
  background-color: #FF8C42;
  color: #FFFFFF;
}

.detail-btn uni-icons {
  margin-right: 8rpx;
}

/* 增加库存弹窗样式 */
.stock-info {
  background-color: #F9FAFB;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.stock-product-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.stock-current {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 8rpx;
}

.stock-preview {
  font-size: 26rpx;
  color: #10B981;
  font-weight: bold;
}

/* 按钮样式 */
.cancel-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F3F4F6;
  color: #6B7280;
  border-radius: 10rpx;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.submit-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FF8C42;
  color: #FFFFFF;
  border-radius: 10rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.submit-btn.disabled {
  background-color: #E5E7EB;
  color: #9CA3AF;
}
</style>